<template>
  <div class="main">
    <el-row :gutter="20">
      <el-col :span="4">
        <p class="label-form"> 车辆名称：</p>
        <el-input v-model="queryParams.carName" placeholder="请输入车辆名称"></el-input>
      </el-col>
     <el-col :span="4">
        <p class="label-form"> 救援类型：</p>
       <el-select style="width: 100%;" clearable v-model="queryParams.type" placeholder="请选择">
         <el-option
           v-for="item in optionsBrand"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
       </el-select>
      </el-col>
      <el-col :span="4">
        <p class="label-form"> 店铺查询：</p>
        <el-select style="width: 100%;" clearable v-model="queryParams.storeName" placeholder="请选择">
          <el-option
            v-for="item in optionsBrand"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="6">
        <p class="label-form"></p>
        <el-button type="primary" @click="getSelect"  icon="el-icon-search">搜索</el-button>
        <el-button type="warning" @click="resert" icon="el-icon-refresh-right">重置</el-button>

      </el-col>
    </el-row>

<!--    <el-row :gutter="20" style="margin-top: 10px">-->
<!--      <el-col :span="4">-->
<!--        <el-button @click="addShop" type="primary" icon="el-icon-plus">新增</el-button>-->
<!--      </el-col>-->
<!--    </el-row>-->

    <el-table :data="tableData" max-height="500" border style="margin-top: 30px">
      <el-table-column prop="id" min-width="100" label="ID"></el-table-column>
      <el-table-column prop="orderSn" min-width="200" label="订单号"></el-table-column>
      <el-table-column prop="carModel" min-width="200" label="车辆信息"></el-table-column>
      <el-table-column prop="licensePlate" min-width="200" label="车牌号"></el-table-column>
      <el-table-column prop="userPhone" min-width="200" label="手机号"></el-table-column>
      <el-table-column prop="ext" width="250"  label="救援位置 ">
        <template slot-scope="scope">
          <el-button icon="el-icon-view" @click="viewShop(scope.row)" type="primary" size="mini">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="img" min-width="200"  label="车辆照片">
        <template slot-scope="scope">
          <el-image style="height: 40px" :src="scope.row.carImg"></el-image>
        </template>
      </el-table-column>
      <el-table-column prop="storeName" width="200"  label="店铺名称 "></el-table-column>
      <el-table-column prop="storeAddress" width="200"  label="店铺地址 "></el-table-column>
      <el-table-column prop="ext" width="200"  label="救援类型 "></el-table-column>

      <el-table-column prop="status" width="200"  label="救援状态 ">
        <template slot-scope="scope">
          {{ status(scope.row.status) }}
        </template>
      </el-table-column>
      <el-table-column min-width="180"  prop="status" label="创建时间">
        <template slot-scope="scope">
          {{ parseTime(scope.row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" width="250" align="center" label="操作">
        <template slot-scope="scope">

          <el-button v-if="scope.row.status ===0" size="mini" type="success" icon="el-icon-success" @click="checkedOrder(scope.row)">立即处理</el-button>
          <el-button v-if="scope.row.status ===0" type="primary" size="mini" icon="el-icon-edit" @click="reject(scope.row)">驳回</el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      title="救援位置"
      :visible.sync="dialogVisible"
      width="900px"
      :before-close="handleClose">
      <baidu-map
        class="map"
        style="display: flex; flex-direction: column"
        @click="setMark"
        :center="center"
        :zoom="15"
        :scroll-wheel-zoom="true">
        <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
        <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
        <bm-marker
          :position="mark"
          :dragging="true" animation="BMAP_ANIMATION_BOUNCE">
          <bm-label
            :content="content"
            :labelStyle="{color: 'red', fontSize : '12px'}"
            :offset="{width: -35, height: 30}"/>
        </bm-marker>
        <bm-driving
          :start="center"
          :end="mark"
          :auto-viewport="true"
          policy="BMAP_DRIVING_POLICY_LEAST_DISTANCE"
          :panel="false"
          :location="mark"
        >
        </bm-driving>
        <bm-local-search :keyword="keyword" :auto-viewport="true" :location="location"></bm-local-search>
      </baidu-map>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>


    <div class="box-pager">
      <pagination
        v-show="pager.total>0"
        :total="pager.total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getListsPage"
      />
    </div>
    <div class="safe"></div>

  </div>
</template>

<script>
import {parseTime} from "@/utils/ruoyi";

import {applicationList, getDict, getRequestArray, updateApplicationStatus, updateRequestStatus} from "@/api/apiFox";

export default {
  data() {
    return {
      currentPage1: 5,
      value1: '',
      pager: {
        total:10
      },
      keyword:"",
      location:"",
      form: {},
      queryParams:{
        pageNum:1,
        pageSize:10,
        carName:"",
        type:"",
        storeName:""
      },

      dialogVisible: false,
      isEdit: false,
      center: {lng: 117.404, lat: 35.915},
      mark: {lng: '', lat: ''},
      content:"",
      tableData: [],
      options: [
        {value: 0, label: '已发布'},
        {value: 1, label: '待处理'},
        {value: 2, label: '已接单'},
        {value: 2, label: '已完成'},
      ],
      optionsBrand:[
        {value: 0, label: '万达一号店铺'},
        {value: 1, label: '雅克轮胎'},
        {value: 2, label: '斯卡轮胎'},
      ],
      value: ''
    }
  },

  created() {

  },

  mounted() {
    this.getLists(this.queryParams)
  },

  methods: {

    getDictList(item){
      getDict(item).then(res=>{
        console.log(res)
        this.messageType = res
      })
    },
    parseTime,
    getListsPage(e){
      this.queryParams.pageNum = e.page
      this.queryParams.pageSize = e.limit
      this.getLists(this.queryParams)
    },
    resert(){
      this.queryParams={
        pageNum:1,
        pageSize:10,
        carName:"",
        type:"",
        storeName:""
      }
      this.getLists(this.queryParams)
    },
    getSelect(){
      this.getLists(this.queryParams)
    },
    getLists(params) {
      applicationList(params).then(res=>{
        console.log(res)
        this.pager.total=res.total
        this.tableData =res.rows
      })
    },

    checkedOrder(item){
      console.log(item)
      this.$confirm('是否接收当前任务', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateApplicationStatus({id:item.id,status:1}).then(res=>{
          this.$message.success('已接收当前任务')
          this.getLists(this.queryParams)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });

    },
    reject(row){
      this.$prompt('请输入驳回理由', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(({ value }) => {
        updateApplicationStatus({id:row.id,status:3,reply:value}).then(res=>{
          this.$message.success('已驳回')
          this.getLists(this.queryParams)
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消输入'
        });
      });
    },
    setMark(e) {
      console.log(e)
      this.center= {lng: e.point.lng, lat: e.point.lat}
      // this.mark = {lng: e.point.lng, lat: e.point.lat}
      // this.reverseGeocode(e.point.lat,e.point.lng)
    },
    updateShop(item) {
      this.dialogVisible = true
      this.form = item
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = true
    },
    viewShop(item) {
      this.dialogVisible = true
      this.form = item
      this.content = item.storeName || '暂无数据'
      this.mark = {lng: item.longitude, lat: item.latitude}
      this.center = {lng: item.longitude, lat: item.latitude}
      this.isEdit = false
    },
    addShop() {
      this.dialogVisible = true
      this.form = {}
      this.isEdit = false
    },
    handleClose() {
      this.dialogVisible = false
    },

    status(val) {
      switch (val) {
        case 0: {
          return '已发布'
        }
        case 1: {
          return '待处理'
        }
        case 2: {
          return '已接单'
        }
        case 3: {
          return '已完成'
        }
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  },
}
</script>


<style scoped lang="scss">
.map {
  width: 100%;
  height: 500px;
}

.main {
  width: 100%;
  min-height: 100vh;
  padding: 30px;
  box-sizing: border-box;

  .label {
    font-size: 14px;
    height: 20px;
    margin-bottom: 5px;
  }
}

.grid-content {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.bg-purple {
  font-size: 14px;
  color: #3f3f3f;
}
</style>
